<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>grade</title>
		
		<script>
			function grade(obj,oEvent){
				//image address
				//var img1 = 'http://www.jb51.net/upload/20080508122008586.gif'; 
				//var img2 = 'http://www.jb51.net/upload/20080508122010810.gif'; 
				var img1 = 'img/img1.gif';
				var img2 = 'img/img2.gif';
				if(obj.gradeFlag)return;
				var e = oEvent||window.event;
				var target = e.target||e.srcElement;
				var imgArray = obj.getElementsByTagName("img");
				
				for(var i=0;i<imgArray.length;i++){
					imgArray[i]._num = i;
					imgArray[i].onclick=function(){
						if(obj.gradeFlag)return;
						obj.gradeFlag=true;
						alert("评分"+(this._num+1)+"分");
						////this._num+1这个数字写入到数据库中,作为评分的依据
					};
				}
				
				if(target.tagName=="IMG"){
					for(var j=0;j<imgArray.length;j++){
						if(j<=target._num){
							imgArray[j].src = img2;
						}else{
							imgArray[j].src = img1;
						}
					}
				}else{
					for(var k=0; k<imgArray.length;k++){
						imgArray[k].src = img1;
					}
				}
			}
		</script>
		<style>
			.starWrapper{
				border:1px solid #FFCC00;
				padding:2px;
				width:110px;
			}
			.starWrapper img{
				cursor:pointer;
			}
		</style>
	</head>
	<body>
		<p class="starWrapper" onmouseover="grade(this,event)"> 
        	<img src="img1" title="很烂" />
			<img src="img1" title="一般" />
			<img src="img1" title="还好" />
			<img src="img1" title="较好" />
			<img src="img1" title="很好" /> 
		</p> 		
	</body>
</html>
